<template>
    <div>
      <h3>这是第九个demo:watch:监听ref:引用数据类型</h3>
      <p>我们假期是{{date.holiday}},上班是{{date.work}}</p>
      <button @click="changeHoliday">修改假期</button>
      <button @click="changeWork">修改工作日期</button>
      <button @click="changeAll">修改全部</button>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from "vue";
  let date = ref({
    holiday: "春节",
    work: "初八",
  });
  function changeHoliday() {
      date.value.holiday = '小年'
  }
  function changeWork() {
      date.value.work = '元宵节'
  }
  function changeAll() {
      date.value = {holiday:'五一',work:"everyDay"}
  }
  watch(date,(newValue,oldValue) => {
      console.log('改变了',newValue,oldValue)
  },{
      deep: true,
      immediate: true
  })
  </script>
  <style lang="scss" scoped></style>